<template>
	<div class="userinfo-form">
		<div class="form-item" @click='upload'>
			<!-- 上传组件 -->
			<xe-upload ref="XeUpload" v-show="false" :options="uploadOptions"
				@callback="handleUploadCallback"></xe-upload>
			<div class="left">
				<view class="avatar" v-if="useravatar">
					<image class="img" :src="useravatar?useravatar:'/static/img/icon/man.svg'" mode="aspectFill">
					</image>
				</view>
			</div>
			<div class="right">
				<div class="text">سۈرەت ئۆزگەرتىش</div>
				<view class="cuIcon-emojifill font"></view>
			</div>
		</div>
		<div class="form-item">
			<div class="left">
				<input type="text" v-model="username" @focus="handleFocus"
					:placeholder="userInfo.opc==0?`${userInfo.username}000${userInfo.id}`:userInfo.username" />
			</div>
			<div class="right">
				<div class="text">ئىسىم ئۆزگەرتىش</div>
				<view class="cuIcon-myfill font"></view>
			</div>
		</div>
		<div class="form-item" @click='copyText'>
			<div class="left">
				<div class="name">
					000{{userInfo.id}}
				</div>
			</div>
			<div class="right">
				<div class="text">UID كۆچۈرۈش</div>
				<view class="cuIcon-btn font"></view>
			</div>
		</div>
		<div class="form-btn submit" @click="handleSubmit">
			ساقلاش
		</div>
		<div class="form-btn exit" @click="handleExit">
			چېكىنىش
		</div>
	</div>
</template>

<script>
	import {
		submitForm
	} from '@/api/setting.js'
	import {
		getUserSession
	} from '@/api/view.js'
	import {
		navigateBack
	} from '@/scripts/compatible/pageOptions.js'
	import {
		userInfoMixin
	} from '@/mixins/userInfo.js'
	export default {
		mixins: [userInfoMixin],
		data() {
			return {
				userInfo: {},
				username: '',
				useravatar: '',
				uploadOptions: {},
				fileList: [],
			}
		},
		mounted() {
			this.userInfo_init()
			this.username_avatar_init()
		},
		methods: {
			async handleSubmit() {
				const res = await submitForm(this)
				if (res) {
					uni.showToast({
						title: '更新成功',
						icon: 'success',
						duration: '3000',
						complete: () => {
							navigateBack()
						}
					})
				} else {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
			},
			handleExit() {
				navigateBack()
			},
			handleUploadCallback(e) {
				// console.log(e);
				if (['choose', 'success'].includes(e.type)) {
					// 根据接口返回修改对应的response相关的逻辑
					const tmpFiles = (e.data || []).map(({
						response,
						tempFilePath,
						name,
						fileType
					}) => {
						const res = response?.result || {};
						const tmpUrl = res.filePath ?? tempFilePath;
						const tmpName = res.fileName ?? name;
						return {
							...res,
							url: tmpUrl,
							name: tmpName,
							fileType,
						};
					});
					// console.log(tmpFiles);
					this.useravatar = tmpFiles[tmpFiles.length - 1].url
					this.fileList.push(...tmpFiles);
				}
			},
			upload() {
				this.$refs.XeUpload.upload('image');
			},
			copyText() {
				const key = `000${this.userInfo.id}`
				uni.setClipboardData({
					data: key,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						})
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'error'
						})
					}
				});
			},
			async username_avatar_init() {
				this.username = this.userInfo.username
				this.useravatar = this.userInfo.useravatar
				this.fileList = [{
					url: this.userInfo.useravatar
				}]
			},
			handleFocus(e) {
				// console.log(e.detail.value);
				if (e.detail.value.includes('000')) {
					this.username = ''
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.userinfo-form {
		padding: 0 20px;
		overflow: hidden;

		.form-item {
			height: 76px;
			border-radius: 6px;
			background-color: #e8e8e8;
			margin-top: 20px;
			display: flex;
			align-items: center;
			color: #333;

			.avatar {
				height: 60px;
				width: 60px;

				.img {
					display: block;
					width: 100%;
					height: 60px;
				}
			}

			.left {
				flex: 1;
				padding: 0 10px;
			}

			.right {
				width: 130px;
				height: 50px;
				position: relative;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding: 0 10px;

				.font {
					color: #b9b9b9;
					font-size: 20px;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 30px;
					margin-left: 10px;
				}

				.text {
					letter-spacing: -1px;
					font-size: 12px;
					direction: rtl;
				}

				&::before {
					content: '';
					display: block;
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					width: 1px;
					background-color: #c8c8c8;
				}
			}
		}

		.form-btn {
			height: 48px;
			width: 240px;
			border-radius: 24px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16px;
			color: #fff;
			margin: 20px auto;
			direction: rtl;

			&.submit {
				background: #69B3F7;
			}

			&.exit {
				background: #FC6C6D;
			}
		}
	}
</style>